<template>
  <div class="anglog_source_list">
    <el-collapse
      :accordion="true"
      v-if="list.length !== 0"
      v-model="activeNames"
      @change="handleChange"
    >
      <!-- name值 siddhi加上类型,单独的siddhi会有重复的 -->
      <el-collapse-item
        :name="item.siddhiAppName + '_' + item.simulationType"
        v-for="(item, index) in list"
        :key="item.siddhiAppName + '_' + item.simulationType"
      >
        <template slot="title">
          <div>
            {{ titleType(item.simulationType) }}：{{ item.siddhiAppName }}
          </div>
          <div class="del__edit_icon">
            <span
              class="el-icon-delete-solid del_icon"
              @click.stop="handleStrDel(item, index)"
            >
            </span>
            <span
              class="el-icon-edit-outline edit_icon"
              @click.stop="handleStrEdit(item, index)"
            >
            </span>
          </div>
        </template>
        <div class="list">
          <div
            class="item"
            v-for="li in item.attributeConfList"
            :key="li.streamName || li.name"
          >
            <div class="item_title">
              <div>
                <span class="title">流名称</span>:{{ li.streamName || li.name }}
              </div>
              <!-- 随机的展示其他不展示 -->
              <div v-if="item.simulationType === 'RANDOM_DATA_SIMULATION'">
                <span class="title">时间间隔</span>:{{
                  li.timestampInterval || "无"
                }}
              </div>
            </div>
            <!-- 数据源 -->
            <div
              class="bata_base"
              v-if="item.simulationType == 'DATABASE_SIMULATION'"
            >
              <div class="bata_base_title">
                数据源: <span class="summary">{{ li.dataSourceLocation }}</span>
              </div>
              <div class="bata_base_title">
                驱动程序类:
                <span class="summary">{{ li.driver }}</span>
              </div>
              <div class="bata_base_title">
                <span style="margin-right: 10px">
                  用户名: <span class="summary">{{ li.username }}</span>
                </span>
                <span>
                  密码:
                  <span class="summary" v-for="(s, i) in li.password" :key="i">
                    *
                  </span>
                </span>
              </div>
              <div class="bata_base_title">
                <span style="margin-right: 10px">
                  表名: <span class="summary">{{ li.tableName }}</span>
                </span>
                <span v-if="li.timestampInterval">
                  时间戳间隔:
                  <span class="summary">{{ li.timestampInterval }}</span>
                </span>
                <span v-if="li.timestampAttribute">
                  时间戳属性:
                  <span class="summary">{{ li.timestampAttribute }}</span>
                </span>
              </div>
            </div>
            <!-- CSV -->
            <div
              class="bata_base"
              v-if="item.simulationType == 'CSV_SIMULATION'"
            >
              <div class="bata_base_title">
                <span style="margin-right: 10px">
                  CSV文件:
                  <span class="summary">{{ li.fileName }}</span>
                </span>
                <span style="margin-right: 10px">
                  分隔符:
                  <span class="summary">{{ li.delimiter }}</span>
                </span>
              </div>
              <div class="bata_base_title">
                <span style="margin-right: 10px">
                  CSV文件按时间戳排序:
                  <span class="summary">{{ !li.isOrdered ? "否" : "是" }}</span>
                </span>
              </div>
              <div class="bata_base_title">
                <span style="margin-right: 10px" v-if="li.timestampAttribute">
                  CSV事件记录时间戳索引:
                  <span class="summary">{{ li.timestampAttribute }}</span>
                </span>
                <span v-if="li.timestampInterval">
                  事件时间递增为(ms):
                  <span class="summary">{{ li.timestampInterval }}</span>
                </span>
              </div>
            </div>
            <div class="item_list">
              <div
                class="item_type"
                v-for="l in li.listAttributes"
                :key="l.name"
              >
                <div class="title">
                  {{ l.name }}({{ l.type[0] }})：
                  <span>
                    {{ attributesType(l.attributesType) || l.value }}
                  </span>
                </div>

                <div v-if="item.simulationType == 'RANDOM_DATA_SIMULATION'">
                  <div
                    class="type"
                    v-if="l.attributesType == 'CUSTOM_DATA_BASED'"
                  >
                    时间: {{ l.list }}
                  </div>
                  <div class="type" v-if="l.attributesType == 'REGEX_BASED'">
                    Pattern: {{ l.pattern }}
                  </div>
                  <div class="type" v-if="l.attributesType == 'PROPERTY_BASED'">
                    类型: {{ l.property }}
                  </div>
                  <div
                    class="type"
                    v-if="l.attributesType == 'PRIMITIVE_BASED'"
                  >
                    <div v-if="l.type[0] == 'STRING'">
                      字符串长度: {{ l.length }}
                    </div>
                    <div
                      v-if="
                        l.type[0] == 'LONG' ||
                        l.type[0] == 'INT' ||
                        l.type[0] == 'DOUBLE' ||
                        l.type[0] == 'FLOAT'
                      "
                    >
                      <span>来自: {{ l.max }}</span>
                      <span style="margin: 0 20px">少于: {{ l.min }}</span>
                      <span v-if="l.type[0] == 'DOUBLE' || l.type[0] == 'FLOAT'"
                        >小数位: {{ l.precision }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { attributesTypeSele, typeOptions } from "@/utils/local";
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    // 随机的 CSV文件 数据库
    titleType() {
      return function (val) {
        return (
          typeOptions.find((item) => {
            return item.value == val;
          })?.label || val
        );
      };
    },
    attributesType() {
      return function (attributesType) {
        return (
          attributesTypeSele.find((item) => {
            return item.value == attributesType;
          })?.label || attributesType
        );
      };
    },
  },
  data() {
    return {
      activeNames: "",
    };
  },
  methods: {
    handleChange() {},
    handleStrDel(item, index) {
      this.$emit("handleStrDel", item, index);
    },
    handleStrEdit(item, index) {
      this.$emit("handleStrEdit", item, index);
    },
  },
};
</script>
<style lang="scss" scoped>
.anglog_source_list {
  padding: 0 20px;
  margin-top: 16px;
  margin-bottom: 20px;
  .list {
    padding-top: 20px;
    .item {
      margin-bottom: 18px;
      .bata_base {
        margin-bottom: 14px;
        line-height: 24px;
        .bata_base_title {
          color: #333;
          font-size: 12px;
          .summary {
            color: #000000;
          }
        }
      }
      .item_list {
        border: 1px solid #e4e4e4;
        .item_type {
          background-color: #f9f9f9;
          border-bottom: 1px solid #e4e4e4;
          &:last-child {
            border-bottom: 0;
          }
          &:nth-child(odd) {
            background-color: #ffff;
          }
          padding: 11px 20px;
          .type {
            color: #999999;
            font-size: 12px;
            margin-top: 6px;
          }
          .title {
            color: #333333;
            font-size: 14px;
          }
        }
      }
      .item_title {
        margin-bottom: 14px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #000000;
        font-size: 14px;
        .title {
          color: #666666;
        }
      }
    }
  }
  .del__edit_icon {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translate(0, -50%);
    .del_icon {
      color: #666666;
      /* margin: 0 20px; */
    }
  }

  .edit_icon {
    color: #666666;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translate(0, -50%);
  }
  /deep/ .el-collapse {
    border: 1px solid #e4e4e4;
    .el-form-item__label {
      font-weight: 400;
    }
    .el-collapse-item {
      .el-collapse-item__header {
        background-color: #f9f9f9;
        padding-left: 10px;
        border-bottom: 1px solid #e4e4e4;
        height: 34px;
        line-height: 34px;
        position: relative;
      }
      .el-collapse-item__wrap {
        padding: 0 10px;
      }
      background-color: #f9f9f9;
    }
  }
}
</style>